<template>
  <ManagePage
    v-model:column-option="columnOption"
    :search-option="searchOption"
    :api-option="apiOption"
  >
    <template #tableOperation="scope">
      <el-button
        type="primary"
        @click="changePower(scope.row)"
      >
        权限设置
      </el-button>
    </template>
    <template #dialog>
      <!-- 表单遮罩 -->
      <BaseFrom
        v-model="dialogVisible"
        title="修改账号"
        :formdata="formdata"
        :row="row"
        :rules="rules"
        @cancel-form="cancelForm"
        @submit-from="submitFrom"
      />

      <!-- 权限遮罩 -->
      <PowerDialog
        :id="powerId"
        v-model:show="powerVisible"
        :power-data="powerData"
        @save="init"
      />
    </template>
  </ManagePage>
</template>

<script>
import { apiGetUserList, apiPutUser, apiPostUser, apiDeleteUser } from '@/api/user.js'
import BaseFrom from '@/components/BaseForm/index.vue'
import PowerDialog from './components/PowerDialog.vue'
import ManagePage from '@/components/ManagePage/index.vue'

export default {
  name: 'UserView',
  components: { ManagePage, PowerDialog, BaseFrom },
  data () {
    return {
      /* 搜索组件 */
      searchOption: [
        { label: '用户名', value: 'username' },
        { label: '账号id', value: 'id' },
        { label: '电话', value: 'tel' }
      ], // 搜索类型

      /* 表单组件及遮罩 */
      dialogVisible: false, // 遮罩
      formdata: {
        username: { label: '用户名', value: '' },
        password: { label: '密码', value: '', type: 'password' },
        tel: { label: '电话', value: '' },
        email: { label: '邮箱', value: '' },
        des: { label: '描述', value: '' }
      }, // 表单
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }, // 表单验证规则
      row: {},

      /* 权限树组件及遮罩 */
      powerData: [],
      powerVisible: false,
      powerId: 0,

      /* 格式组件 */
      columnOption: [
        { field: 'username', cname: '用户名', cshow: true, align: 'center', showname: '用户名', clock: false, width: 100 },
        { field: 'id', cname: '账号id', cshow: true, align: 'center', showname: '账号id', clock: false, width: 80 },
        { field: 'tel', cname: '电话', cshow: true, align: 'center', showname: '电话', clock: false, width: 120 },
        { field: 'email', cname: '邮箱', cshow: true, align: 'center', showname: '邮箱', clock: false, width: 180 },
        { field: 'des', cname: '描述', cshow: true, align: 'center', showname: '描述', clock: false },
        { field: 'operation', cname: '操作', cshow: true, align: 'center', showname: '操作', clock: true, width: 280 }
      ],
      apiOption: {
        primaryKey: 'id',
        create: {
          type: 'callback',
          callback: () => this.add()
        },
        update: {
          type: 'callback',
          callback: (row) => this.change(row)
        },
        del: {
          type: 'api',
          api: apiDeleteUser
        },
        list: {
          type: 'api',
          api: apiGetUserList
        }
      }
    }
  },
  methods: {
    // 添加
    add () {
      this.resetFormdata() // 先清空表单
      this.dialogVisible = true // 再打开遮罩
    },

    /* 表格 */
    // 修改
    change (row) {
      row.password = '' // api中不返回密码字段，自定义空的key值
      this.row = row
      this.dialogVisible = true
    },
    // 修改权限
    changePower (row) {
      this.powerData = JSON.parse(row.power) || []
      this.powerId = row.id
      this.powerVisible = true
    },

    /* 表单组件 */
    // 取消遮罩
    cancelForm () {
      this.dialogVisible = false
    },
    // 重置formdata
    resetFormdata () {
      this.row = {}
    },
    // 确定表单信息
    async submitFrom (e, type) {
      this.dialogVisible = false
      if (type === 1) {
        // type为1为修改
        await apiPostUser(e) // 发送更改用户信息
      } else {
        // type为0为添加
        await apiPutUser(e) // 发送添加用户
      }
      await this.init() // 添加后重新初始化
    },

    init () {}
  }
}
</script>

<style lang="less" scoped>
</style>
